<template>
   <div class="classifyModal flex colorF">
        <div class="flex2 flexC JustifyContentC AlignItemsC">
            <div class="item_bg flexC JustifyContentSA font_s18">
                <div class="flex JustifyContentC">
                    <p class="left_top_bg">运营管理</p>
                    <p class="left_top_bg">消防安全</p>
                </div>
                <div class="flex JustifyContentC">
                    <p class="left_top_bg">设备设施</p>
                    <p class="left_top_bg">烟花爆竹管控</p>
                </div>
            </div>
            <div class="item_bg flex JustifyContentSB font_s18" style="padding: 3rem 2rem;">
                <p class="left_bottom_bg">日常监管</p>
                <p class="left_bottom_bg">专项监管</p>
                <p class="left_bottom_bg">联合监管</p>
            </div>
        </div>
        <div class="classifyModal_center flex3 positionR">
            <div style="position: absolute;top:21%;left:-5%;">
                <div class="center_bg01 animation01"></div>
                <div class="textC" style="position:absolute;top:35%;left:41%;">
                    <p><img src="../../../assets/img/comprehensive/left/04.png"></p>
                    <p>风险</p>
                </div>
            </div>
            <div style="position: absolute;top:19%;left:74%;">
                <div class="center_bg02 animation02"></div>
                <div class="textC" style="position:absolute;top:36%;left:42%;">
                    <p><img src="../../../assets/img/comprehensive/left/06.png"></p>
                    <p>信用</p>
                </div>
            </div>
            <div class="font_s20" style="position: absolute;top:43%;left:3%;">
                <div class="center_bg03 animation01"></div>
                <div class="textC" style="position:absolute;top:36%;left:40%;">
                    <p><img src="../../../assets/img/comprehensive/left/08.png"></p>
                    <p>动态</p>
                </div>
            </div>
            <div class="font_s20" style="position: absolute;top:45%;left:61%;">
                <div class="center_bg04 animation02"></div>
                <div class="textC" style="position:absolute;top:36%;left:42%;">
                    <p><img src="../../../assets/img/comprehensive/left/10.png"></p>
                    <p>智能</p>
                </div>
            </div>
        </div>
        <div class="flex2 flexC JustifyContentC AlignItemsC">
            <div class="flex item_bg font_s18 JustifyContentSB" style="padding-left:2.825rem;padding-right:2.825rem;">
                <div>
                    <p class="right_top_bg">证照合同</p>
                    <p class="right_top_bg">内部管理</p>
                    <p class="right_top_bg">诚信经营</p>
                </div>
                <div>
                    <p class="right_top_bg">信访投诉</p>
                    <p class="right_top_bg">加分项</p>
                </div>
            </div>
            <div class="flex item_bg font_s18" style="padding-top:3.725rem;padding-left:2.25rem;">
                <div>
                    <p class="right_bottom_bg">探头人流计数设备</p>
                    <p class="right_bottom_bg">6个双推送</p>
                </div>
                <div>
                    <p class="right_bottom_bg">舆情预警</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'ClassifyModal'
}
</script>
<style scoped>
.classifyModal {
    background: url(../../../assets/img/comprehensive/left/02.png) no-repeat center;
    background-size: 59% 79%;
    width: 100%;
    height: 100%;
}
.item_bg {
    background: url(../../../assets/img/comprehensive/left/01.png) no-repeat;
    background-size: 100% 100%;
    width: 90%;
    height: 34.5%;
    margin:3.25rem 0;
    padding: 3rem 0;
    box-sizing: border-box;
}
.left_top_bg {
    background: url(../../../assets/img/comprehensive/left/11.png) no-repeat;
    background-size: 100% 100%;
    width: 39%;
    height: 5.25rem;
    line-height: 4.85rem;
    text-align: center;
    margin: 0 1rem;
}
.left_bottom_bg {
    background: url(../../../assets/img/comprehensive/left/12.png) no-repeat;
    background-size: 100% 100%;
    width: 31%;
    height: 12rem;
    line-height: 12rem;
    text-align: center;
}
.right_top_bg {
    background: url(../../../assets/img/comprehensive/left/13.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    width: 10.25rem;
    height: 4.25rem;
    line-height: 3.45rem;
}
.right_bottom_bg {
    background: url(../../../assets/img/comprehensive/left/14.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    width: 10.825rem;
    height: 5.25rem;
    line-height: 4.25rem;
    /* margin: 0 0.25rem; */
}
.center_bg01 {
    background: url(../../../assets/img/comprehensive/left/03.png) no-repeat;
    background-size: 100% 100%;
    width: 11.825rem;
    height:11.825rem;
}
.center_bg02 {
    background: url(../../../assets/img/comprehensive/left/05.png) no-repeat;
    background-size: 100% 100%;
    width: 14.25rem;
    height:14.25rem;
}
.center_bg03 {
    background: url(../../../assets/img/comprehensive/left/07.png) no-repeat;
    background-size: 100% 100%;
    width: 16.825rem;
    height:16.825rem;
}
.center_bg04 {
    background: url(../../../assets/img/comprehensive/left/09.png) no-repeat;
    background-size: 100% 100%;
    width: 14.825rem;
    height:14.825rem;
}
.animation01 {
    animation: animation-left infinite 10s linear;
}
.animation02 {
    animation: animation-right infinite 10s linear;
}
@keyframes animation-left {
    from {
        transform:rotate(0deg)
    } to {
        transform: rotate(360deg)
    }
}
@keyframes animation-right {
    from {
        transform: rotate(360deg)
    } to {
        transform: rotate(0deg)
    }
}
</style>
